fix(dashboard): update scrollbar contrast on background#62244
fix(dashboard): update scrollbar contrast on background#62244kristian-zendato wants to merge 1 commit into
Conversation
Signed-off-by: Kristian Zendato <kristian.zendato@nextcloud.com>
joshtrichards
added
bug
3. to review
joshtrichards
changed the title
| #content { | ||
| overflow: auto; | ||
| /* Scrollbar sits on the background image — use plain-text color for contrast */ | ||
| scrollbar-color: var(--color-background-plain-text) transparent; |
There was a problem hiding this comment.
I'm not sure this is versatile enough for all possible backgrounds: e.g. high-contrast themes, custom background images, or maintaining contrast along the entire scrollbar edge of an arbitrary image. Part of the approach used for the dashboard #header might be applicable/re-usable.
There was a problem hiding this comment.
@joshtrichards Thank you for the comment.
Dashboard Header always uses --color-background-plain-text which I used for the scrollbar.
Also I tried with different scenarios, custom background images and colors and high-contrast themes, it works as expected.
There was a problem hiding this comment.
I'm not sure this is versatile enough for all possible backgrounds: e.g. high-contrast themes, custom background images, or maintaining contrast along the entire scrollbar edge of an arbitrary image. Part of the approach used for the dashboard #header might be applicable/re-usable.
It is, that color is calculated from the background image to have the maximum contrast (its the icons color).
There was a problem hiding this comment.
Ah, got it - that makes sense. Reusing the header foreground color is probably the best approach here. Trying to derive a separate color specifically for a vertical scrollbar would get messy, and maintaining contrast along the entire scrollbar edge of an arbitrary image is out of scope. This seems good enough to me.
|
(tested and works as expected) |
|
/backport to stable34 |
|
/backport to stable33 |
| #content { | ||
| overflow: auto; | ||
| /* Scrollbar sits on the background image — use plain-text color for contrast */ | ||
| scrollbar-color: var(--color-background-plain-text) transparent; |
There was a problem hiding this comment.
Ah, got it - that makes sense. Reusing the header foreground color is probably the best approach here. Trying to derive a separate color specifically for a vertical scrollbar would get messy, and maintaining contrast along the entire scrollbar edge of an arbitrary image is out of scope. This seems good enough to me.
joshtrichards
added
4. to release
3 participants
Summary
Checklist
3. to review, feature component)stable32)AI (if applicable)